<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登陆注册表单</title>
    <link rel="stylesheet" href="./assets/signin.css">
    <link rel="stylesheet" href="./assets/layui-v2.6.8/layui/css/layui.css">

</head>

<body>
    <div class="container right-panel-active">

        <!-- 注册 -->
        <div class="container__form container--signin">

            <form action="#" class="layui-form" id="form1">
                <h2 class="form__title">注册</h2>
                <input type="text" placeholder="用户名" class="input" id="username1" lay-verify="required|username"
                    lay-verify="required|pwd"></input>
                <input type="password" placeholder="请输入密码" class="input" id="password1"
                    lay-verify="required|pass|number" lay-verify="required|pwd"></input>
                <input type="password" placeholder="请再次密码" class="input" id="password3"
                    lay-verify="required|pass|number|repass" lay-verify="required|pwd"></input>
                <button id="btn1" onclick="signup()" lay-submit>注册</button>



            </form>
        </div>
        <!-- 登陆 -->
        <div class=" container__form container--signup">

            <form action="#" class="layui-form" id="form2">
                <h2 class="form__title"> 登陆</h2>
                <input type="text" placeholder="用户名" class="input" id="userNAME" lay-verify="required|username"></input>
                <input type="password" placeholder="密码" class="input" id="passWORD"
                    lay-verify="required|pass|number"></input>
                <button id="btn2" onclick="signin()" lay-submit>登陆</button>
            </form>


        </div>
        <!--运动模块-->
        <div class=" container__overlay">
            <div class="overlay">
                <div class="overlay__panel overlay--left">
                    <button class="btn" id="signUp">没有账号？速来注册</button>
                </div>
                <div class="overlay__panel overlay--right">
                    <button class="btn" id="signIn">已有账号？速来登陆</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./assets/signin.js"></script>
    <script src="./assets/layui-v2.6.8/layui/layui.js"></script>
    <script>
        layui.use('form', function () {
            var form = layui.form;
            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                },
                pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ],
                repass: function (value) {
                    var pwd = document.getElementById('password1').value

                    if (pwd !== value) {
                        return '两次密码不一致！'
                    }
                }
            })
        })</script>
</body>


</html>